<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>pie</title>
    <!-- 引入echarts外联，所以不需要安装echarts -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.2.1/echarts.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>

    <!-- 水位图 -->
    <script src="./js/echarts-liquidfill.js"></script>
    <style>
      body {
        background: #2c2c2c;
      }
    </style>

    <style>
      .total-box {
        width: 50%;
        height: auto;
        display: block;
        position: absolute;
        z-index: 9;
        top: 32%;
        left: 0.5%;
        text-align: center;
      }
      .total-box p {
        width: 100%;
        height: auto;
        display: block;
        font-size: 22px;
        font-family: Source Han Sans CN, Source Han Sans CN-Bold;
        font-weight: 700;
        text-align: center;
        color: #f0f2f5;
        margin: 0;
      }
      .total-box p i {
        font-size: 14px;
        font-style: normal;
      }

      .total-box span {
        width: 100%;
        height: auto;
        display: block;
        font-size: 14px;
        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
        font-weight: 400;
        text-align: center;
        color: #c4c9ca;
        margin: 0;
      }
    </style>

    <style>
      .right7 {
        width: 250px;
        height: auto;
        position: absolute;
        top: 30px;
        right: 20px;
      }
      .right7 div {
        width: 100%;
        height: auto;
        display: block;
        float: right;
        margin: 0 0 30px;
      }
      .right7 div i {
        width: 5px;
        height: 5px;
        display: block;
        float: right;
        border-radius: 100px;
        border: 4px solid #33cc00;
        margin: 0 5px 0 0;
      }
      .right7 div p {
        width: 80%;
        height: auto;
        display: block;
        float: right;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        margin: 0;
        text-align: left;
        color: #fffefe;
        margin: -3px 0 0 0;
      }
      .right7 div p em {
        color: #33cc00;
        font-style: normal;
      }

      .right7 div p span {
        width: 100%;
        height: auto;
        display: block;
        float: left;
        font-size: 24px;
        font-family: PingFang SC, PingFang SC-Heavy;
        font-weight: bold;
        text-align: left;
        color: #33cc00;
      }
      .right7 div:nth-child(2) i {
        border: 4px solid #f6ff00;
      }
      .right7 div:nth-child(2) p span {
        color: #f6ff00;
      }

      .right7 div:nth-child(2) p em {
        color: #f6ff00;
      }

      .total-box7 {
        width: 50%;
        height: auto;
        display: block;
        position: absolute;
        z-index: 9;
        top: 27%;
        left: 0%;
        text-align: center;
      }
      .total-box7 p {
        width: 100%;
        height: auto;
        display: block;
        font-size: 28px;
        font-family: Adobe Heiti Std, Adobe Heiti Std-R;
        font-weight: normal;
        color: #fca101;
        text-align: center;
        margin: 0;
      }

      .total-box7 span {
        width: 100%;
        height: auto;
        display: block;
        font-size: 17px;
        font-family: Adobe Heiti Std, Adobe Heiti Std-R;
        font-weight: normal;
        color: #8adcff;
        text-align: center;
        margin: 0;
      }
      .total-box7 p span {
        font-size: 28px;
        font-family: Adobe Heiti Std, Adobe Heiti Std-R;
        font-weight: normal;
        color: #fca101;
        text-align: center;
        display: inline;
      }
    </style>

    <style>
      .right8 {
        width: 50%;
        height: auto;
        display: block;
        float: right;
        position: absolute;
        top: 2%;
        right: 10px;
      }
      .right8 p {
        width: 50%;
        height: auto;
        display: block;
        float: left;
        margin: 10px 0 0 0;
      }
      .right8 p span {
        width: 100%;
        height: auto;
        display: block;
        float: left;
        margin: 0 0 0 0;
        font-size: 14px;
        font-family: Microsoft YaHei, Microsoft YaHei-Bold;
        font-weight: 700;
        text-align: left;
        color: #ffffff;
      }

      .right8 p em {
        width: 100%;
        height: auto;
        display: block;
        float: left;
        margin: 0 0 0 0;
        font-size: 19px;
        font-family: PingFang SC, PingFang SC-Heavy;
        font-weight: bold;
        text-align: left;
        color: #2648b9;
        font-style: normal;
      }
      .right8 i {
        font-size: 13px;
        color: #ffffff;
        font-style: normal;
        margin: 0 0 0 5px;
      }
      .right8 b {
        font-size: 13px;
        font-style: normal;
        margin: 0 0 0 5px;
      }
      .total-box8 {
        width: 50%;
        height: auto;
        display: block;
        position: absolute;
        z-index: 9;
        top: 25%;
        left: 2.3%;
        text-align: center;
      }
      .total-box8 p {
        width: 100%;
        height: auto;
        display: block;
        font-size: 27px;
        font-family: Source Han Sans CN, Source Han Sans CN-Bold;
        font-weight: 700;
        text-align: center;
        color: #f0f2f5;
        margin: 0;
      }

      .total-box8 span {
        width: 100%;
        height: auto;
        display: block;
        font-size: 14px;
        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
        font-weight: 400;
        text-align: center;
        color: #c4c9ca;
        margin: 0;
      }

      .total-box8 p i {
        font-size: 13px;
        color: #ffffff;
        font-style: normal;
        margin: 0 0 0 5px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
      <div id="main1" style="width: 444px; height: 213px; float: left; margin:20px 10px 0;"></div>
      <div id="main2" style="width: 444px; height: 213px; float: left; margin:20px 10px 0;"></div>

      <div id="main3" style="width: 444px; height: 213px; float: left; margin:20px 10px 0;"></div>

      <div id="main4" style="width: 444px; height: 213px; float: left; margin:20px 10px 0;"></div>

      <div id="main5" style="width: 444px; height: 213px; float: left; margin:20px 10px 0;"></div>

      <!-- total6 -->
      <div style="width: 444px; height: 213px; float: left; margin:20px 10px 0;; position: relative">
        <div class="total-box">
          <p id="total6"></p>
          <span id="name6"></span>
        </div>

        <div id="main6" style="height: 87%; position: relative"></div>
      </div>

      <!-- total7 -->
      <div style="width: 444px; height: 213px; float: left; margin:20px 10px 0;; position: relative">
        <div class="total-box7">
          <p>
            <!-- <count-to
            class="top_count"
            :startVal="0"
            :endVal="total"
            separator=""
          ></count-to> -->
            {{ total }}%
          </p>
          <span>{{ name }}</span>
        </div>

        <div class="right7">
          <div v-for="(e, i) of nyjxhzy">
            <p>
              {{ e.label }}作业面积<em>{{ e.num }}万公顷</em
              ><span>{{ e.percent }}%</span>
            </p>
            <i></i>
          </div>
        </div>

        <div
          id="main7"
          class="chart"
          ref="chart"
          style="height: 87%; position: relative"
        ></div>
      </div>

      <!-- total8 -->
      <div style="width: 444px; height: 213px; float: left; margin:20px 10px 0;; position: relative">
        <div id="main8" style="height: 87%; position: relative"></div>
        <div class="total-box8">
          <p>{{ total8 }}<i>%</i></p>
          <span>{{ name8 }}</span>
        </div>

        <div class="right8">
          <p v-for="(item, index) in nyjxslzb" :key="index">
            <span>{{ item.label }}</span
            ><em :style="{ color: colorList[index] }"
              >{{item.scale}}%<b>{{ item.percent }}</b><i>台</i></em
            >
          </p>
        </div>
      </div>

      <div id="main9" style="width: 444px; height: 213px; float: left; margin:20px 10px 0;"></div>

      <div id="main10" style="width: 450px; height: 520px; float: left; margin:20px 10px 0;"></div>

      <div id="main11" style="width: 465px; height: 228px; float: left; margin:20px 10px 0;"></div>

      <div id="main12" style="width: 465px; height: 228px; float: left; margin:20px 10px 0;"></div>
    </div>

    <script type="text/javascript">
      new Vue({
        el: "#app",
        data: {
          name: "", // 在这里定义 name 属性
          total: "",
          nyjxhzy: [
            {
              label: "小麦机械化",
              percent: 49.6,
              num: 4.62,
            },
            {
              label: "水稻机械化",
              percent: 51.4,
              num: 4.69,
            },
          ],

          total8: "",
          name8: "",
          nyjxslzb: [
            {
              label: "大中型拖拉机",
              percent: 1748,
              scale: 21,
            },
            {
              label: "联合收割机",
              percent: 1526,
              scale: 18,
            },
            {
              label: "粮食烘干机",
              percent: 672,
              scale: 8.0,
            },
            {
              label: "插秧机",
              percent: 3789,
              scale: 46,
            },
            {
              label: "无人植保机",
              percent: 574,
              scale: 7,
            },
          ],
          colorList: [
            "#76EBFF",
            "#f9c956",
            "#75bedc",
            "#FF4F4A",
            "#00FFB4",
            "#DBCE00",
            "#DC8D31",
            "#91cd77",
            "#ef6567",
            "#f9c956",
            "#75bedc",
          ],
          total10: "",
          name10: "",
          ynxxsfb: [
            {
              label: "安宜",
              percent: 23,
            },
            {
              label: "氾水",
              percent: 25,
            },
            {
              label: "夏集",
              percent: 18,
            },
            {
              label: "柳堡",
              percent: 17,
            },
            {
              label: "鲁垛",
              percent: 12,
            },
            {
              label: "广洋湖",
              percent: 13,
            },
            {
              label: "小官庄",
              percent: 9,
            },
            {
              label: "望直港",
              percent: 20,
            },
            {
              label: "射阳湖",
              percent: 30,
            },
            {
              label: "西安丰",
              percent: 8,
            },
            {
              label: "曹甸",
              percent: 22,
            },
            {
              label: "泾河",
              percent: 19,
            },
            {
              label: "山阳",
              percent: 20,
            },
            {
              label: "开发区",
              percent: 9,
            },
          ],

          nyxmlx: [
            {
              createBy: "",
              createTime: "2023-07-12 11:24:04",
              updateBy: "",
              updateTime: "2023-07-12 11:24:04",
              remark: null,
              id: 15,
              label: "农田",
              value: 12,
              status: "0",
              delFlag: "0",
            },
            {
              createBy: "",
              createTime: "2023-07-12 11:24:13",
              updateBy: "",
              updateTime: "2023-07-12 11:24:13",
              remark: null,
              id: 16,
              label: "水产",
              value: 21,
              status: "0",
              delFlag: "0",
            },
            {
              createBy: "",
              createTime: "2023-07-12 11:24:24",
              updateBy: "",
              updateTime: "2023-07-12 11:24:23",
              remark: null,
              id: 17,
              label: "种植",
              value: 22,
              status: "0",
              delFlag: "0",
            },
            {
              createBy: "",
              createTime: "2023-07-12 11:24:36",
              updateBy: "",
              updateTime: "2023-07-12 11:24:36",
              remark: null,
              id: 18,
              label: "农机",
              value: 15,
              status: "0",
              delFlag: "0",
            },
            {
              createBy: "",
              createTime: "2023-07-12 11:24:44",
              updateBy: "",
              updateTime: "2023-07-12 11:24:43",
              remark: null,
              id: 19,
              label: "畜牧",
              value: 5,
              status: "0",
              delFlag: "0",
            },
            {
              createBy: "",
              createTime: "2023-07-12 11:25:11",
              updateBy: "",
              updateTime: "2023-07-12 11:25:12",
              remark: null,
              id: 20,
              label: "创新",
              value: 7,
              status: "0",
              delFlag: "0",
            },
          ],
          dataSource:[
  {
    "createBy": "",
    "createTime": null,
    "updateBy": "",
    "updateTime": "2023-07-28 16:59:08",
    "remark": null,
    "id": 1,
    "deviceName": "水情",
    "deviceProportion": 20,
    "status": "0",
    "delFlag": "0"
  },
  {
    "createBy": "",
    "createTime": null,
    "updateBy": "",
    "updateTime": "2023-07-28 16:59:19",
    "remark": null,
    "id": 2,
    "deviceName": "土壤",
    "deviceProportion": 30,
    "status": "0",
    "delFlag": "0"
  },
  {
    "createBy": "",
    "createTime": null,
    "updateBy": "",
    "updateTime": "2023-07-28 16:59:50",
    "remark": null,
    "id": 3,
    "deviceName": "监控",
    "deviceProportion": 25,
    "status": "0",
    "delFlag": "0"
  },
  {
    "createBy": "",
    "createTime": null,
    "updateBy": "",
    "updateTime": "2023-07-28 17:00:02",
    "remark": null,
    "id": 4,
    "deviceName": "虫情",
    "deviceProportion": 15,
    "status": "0",
    "delFlag": "0"
  },
  {
    "createBy": "",
    "createTime": null,
    "updateBy": "",
    "updateTime": "2023-07-28 17:00:23",
    "remark": null,
    "id": 5,
    "deviceName": "气象",
    "deviceProportion": 10,
    "status": "0",
    "delFlag": "0"
  }
]
        },
        mounted() {
          // 基于准备好的dom，初始化echarts实例
          var myChart1 = echarts.init(document.getElementById("main1"));

          var pieData1 = {
            color: ["#33CC00", "#F6FF00", "#FF8400", "#EE6869", "#EE6869"],
            series: [
              { value: 33, name: "0次主体巡查" },
              { value: 17, name: "1次主体巡查" },
              { value: 34, name: "2次主体巡查" },
              { value: 34, name: "3次及以上主体巡查" },
            ],
          };
          // 指定图表的配置项和数据
          var option1 = {
            color: pieData1.color,
            tooltip: {
              trigger: "item",
              transitionDuration: 0,
              // formatter: '{b} : {c} ({d}%)'
              formatter: "{b} : ({d}%)",
            },

            legend: {
              icon: "circle",
              right: "10%",
              top: "12%",
              itemGap: 10,
              width: "50%",

              itemWidth: 7, //图标宽
              itemHeight: 7, //图标高

              textStyle: {
                color: "auto",
                fontSize: 14,

                padding: [0, 10], //文字与图形之间的左右间距
                rich: {
                  b: {
                    fontSize: 14,
                    // lineHeight: 25,
                  },
                  a: {
                    // color: "#ffffff",
                    //  color: "#fff",
                    fontSize: 14,
                    lineHeight: 18,
                  },
                },
              },

              formatter: function (name) {
                let data = pieData1.series;
                let total = 0;
                let tarValue;

                for (let i = 0; i < data.length; i++) {
                  total += data[i].value * 1;
                  if (data[i].name == name) {
                    tarValue = data[i].value + "个主体  ";
                  }
                }

                //  +  (data[i].value/total*100).toFixed(2) + '%'

                let v = tarValue;

                var arr = [`{a|${name}}`, `{b|${tarValue}}`];
                return arr.join("\n");
              },
            },

            series: [
              {
                type: "gauge",
                startAngle: 270,
                endAngle: -89.9999,
                radius: "80%",
                center: ["25%", "50%"],

                axisTick: {
                  show: false,
                },
                axisLabel: {
                  show: false,
                },
                splitNumber: 50,
                axisLine: {
                  show: false,
                  lineStyle: {
                    color: [[1, "rgba(2, 115, 131, 1)"]],
                    width: 1,
                  },
                },
                splitLine: {
                  length: 1,
                  lineStyle: {
                    length: 1,
                    width: 5,
                    color: "rgba(2, 115, 131, 1)",
                    distance: 1,
                  }, //刻度节点线
                },
                detail: {
                  show: false,
                },
              },
              {
                type: "pie",

                radius: ["50%", "70%"],
                center: ["25%", "50%"],
                avoidLabelOverlap: false,
                label: {
                  show: false,
                  position: "center",
                },
                emphasis: {
                  label: {
                    show: false,
                    fontSize: 40,
                    fontWeight: "bold",
                  },
                },
                labelLine: {
                  show: false,
                },
                data: pieData1.series,
              },
            ],
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart1.setOption(option1);

          // 基于准备好的dom，初始化echarts实例
          var myChart2 = echarts.init(document.getElementById("main2"));
          var pieData2 = {
            newPercent: [0.6, 0.55, 0.4, 0.25],
            percent: 30,
            label: "大米",
          };
          var option2 = {
            series: [
              {
                type: "liquidFill", //水位图
                radius: "70%", //显示比例
                center: ["50%", "40%"], //中心点
                amplitude: 5, //水波振幅
                data: [pieData2.newPercent], // data个数代表波浪数 数值代表百分比
                color: [
                  {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 1,
                        color: "#24626B",
                      },
                      {
                        offset: 0,
                        color: "#28D9FD",
                      },
                    ],
                    globalCoord: false,
                  },
                ], //波浪颜色
                backgroundStyle: {
                  borderWidth: 0.5, //外边框
                  borderColor: "#26CDEE", //边框颜色
                  color: "#283A3E", //边框内部填充部分颜色
                },
                label: {
                  //标签设置
                  normal: {
                    position: ["50%", "50%"],
                    formatter: pieData2.percent + "%\n" + pieData2.label, //显示文本,
                    textStyle: {
                      fontSize: "14", //文本字号,
                      color: "#fff",
                    },
                  },
                },
                outline: {
                  show: false, //最外层边框显示控制
                },
              },
            ],
          };
          myChart2.setOption(option2);

          // 基于准备好的dom，初始化echarts实例
          var myChart3 = echarts.init(document.getElementById("main3"));
          var pieData3 = [
            {
              label: "大米",
              count: 12,
            },
            {
              label: "大豆",
              count: 14,
            },
            {
              label: "荷藕",
              count: 21,
            },
            {
              label: "茨菇",
              count: 18,
            },
            {
              label: "乌青菜",
              count: 16,
            },
          ];
          let Data = [];
          for (let i = 0; i < pieData3.length; i++) {
            Data.push({
              value: pieData3[i].count,
              name: pieData3[i].label,
            });
          }
          var option3 = {
            color: ["#00b1f2", "#ff921d", "#7bed75", "#4df9ff", "#e8ff7f"],
            legend: {
              type: "plain",
              orient: "vertical",
              left: "50%",
              top: "center",
              align: "left",
              itemGap: 10,
              itemWidth: 10, // 设置宽度
              itemHeight: 10, // 设置高度
              icon: "circle",
              symbolKeepAspect: false,
              formatter: function (name) {
                let data = Data;
                let total = 0;
                let tarValue;
                for (let i = 0; i < data.length; i++) {
                  total += data[i].value;
                  if (data[i].name == name) {
                    tarValue = data[i].value + "户";
                  }
                }
                let v = tarValue;
                //计算出百分比
                return `${name}  ${v} `;
                //name是名称，v是数值
              },
              textStyle: {
                color: "#fff",
                fontSize: 14,
              },
            },
            series: [
              {
                type: "pie",
                hoverAnimation: true,
                hoverOffset: 8,
                startAngle: 180, //起始角度
                clockwise: false, //是否顺时针
                radius: ["30%", "60%"],
                center: ["25%", "50%"],
                avoidLabelOverlap: false,
                emphasis: {
                  label: {
                    show: false,
                  },
                },
                label: {
                  show: false,
                  position: "center",
                  color: "rgba(13, 17, 29,0)",
                },
                labelLine: {
                  show: false,
                },
                data: Data,
                zlevel: 30,
              },
            ],
          };
          myChart3.setOption(option3);

          // 基于准备好的dom，初始化echarts实例
          var myChart4 = echarts.init(document.getElementById("main4"));
          var pieData4 = [
            {
              label: "鸡",
              percent: 22,
            },
            {
              label: "鸭",
              percent: 22,
            },
            {
              label: "猪",
              percent: 36,
            },
            {
              label: "鹅",
              percent: 8,
            },
            {
              label: "牛",
              percent: 6,
            },
            {
              label: "羊",
              percent: 6,
            },
          ];
          var dataSource = pieData4.map((item) => {
            item.name = item.label;
            item.value = item.percent;
            return item;
          });

          var option4 = {
            legend: {
              top: "5%",
              left: "center",
              show: false,
            },
            grid: {
              left: "2%",
              right: "5%",
              bottom: "5%",
              top: "5%",
              containLabel: true,
            },
            color: [
              "#91cc75",
              "#fac858",
              "#ee6666",
              "#73c0de",
              "#3ba272",
              "#fc8452",
              "#9a60b4",
              "#ea7ccc",
            ],
            series: [
              {
                name: "牲畜种类",
                type: "pie",
                radius: ["50%", "70%"],
                center: ["50%", "50%"],
                startAngle: 0,
                label: {
                  position: "outer",
                  formatter: "{b}\n{c}%",
                  alignTo: "edge",
                  margin: "15%",
                  edgeDistance: "80",
                },
                // emphasis: {
                //     label: {
                //         show: true,
                //         position: 'outside',
                //         fontSize: 40,
                //         fontWeight: 'bold'
                //     }
                // },
                data: dataSource,
              },
              {
                name: "外边框",
                type: "pie",
                clockWise: false, //顺时加载
                hoverAnimation: false, //鼠标移入变大
                center: ["50%", "50%"],
                radius: ["71%", "75%"],
                label: {
                  normal: {
                    show: false,
                  },
                },
                data: [
                  {
                    value: 0,
                    name: "",
                    itemStyle: {
                      normal: {
                        borderWidth: 0,
                        color: "#367DD7",
                      },
                    },
                  },
                ],
              },
              {
                name: "内边框",
                type: "pie",
                clockWise: false, //顺时加载
                hoverAnimation: false, //鼠标移入变大
                center: ["50%", "50%"],
                radius: ["45%", "49%"],
                label: {
                  normal: {
                    show: false,
                  },
                },
                data: [
                  {
                    value: 0,
                    name: "",
                    itemStyle: {
                      normal: {
                        borderWidth: 0,
                        color: "#367DD7",
                      },
                    },
                  },
                ],
              },
            ],
          };
          myChart4.setOption(option4);

          // 基于准备好的dom，初始化echarts实例
          var myChart5 = echarts.init(document.getElementById("main5"));
          var pieData5 = [
            {
              areaName: "常规鱼",
              count: 8,
            },
            {
              areaName: "河蟹",
              count: 24,
            },
            {
              areaName: "中华鳖",
              count: 3.6,
            },
            {
              areaName: "乌龟",
              count: 0.039,
            },
            {
              areaName: "克氏原螯虾",
              count: 4.2,
            },
            {
              areaName: "青虾",
              count: 0.2,
            },
            {
              areaName: "鳜鱼",
              count: 0.17,
            },
            {
              areaName: "黄颡鱼",
              count: 0.15,
            },
            {
              areaName: "乌鳢",
              count: 0.119,
            },
            {
              areaName: "黄鳝",
              count: 0.0615,
            },
            {
              areaName: "泥鳅",
              count: 0.0195,
            },
            {
              areaName: "其它",
              count: 1.2,
            },
          ];
          let colors5 = [
            "#73ebff",
            "#618fad",
            "#61A0A8",
            "#D48265",
            "#91C7AE",
            "#CA8622",
            "#BDA29A",
            "#89909e",
            "#5a94b9",
            "#C4CCD3",
            "#FEE394",
            "#7DF6F6",
            "#61A0A8",
            "#2ba693",
            "#4592d3",
          ];
          let data5 = [];
          for (let i = 0; i < pieData5.length; i++) {
            data5.push({
              value: pieData5[i].count,
              name: pieData5[i].areaName,
              itemStyle: {
                color: colors5[i],
              },
            });
          }
          var option5 = {
            legend: {
              top: 10,
              right: 5,
              orient: "vertical", //改变排列方式
              icon: "roundRect", //改变legend小图标形状
              itemGap: 12, // 设置legend的间距
              itemWidth: 12, // 设置宽度
              itemHeight: 12, // 设置高度
              textStyle: {
                fontSize: 12,
                color: "#fff",
              },
              itemStyle: {
                borderColor: "transparent",
              },
            },

            tooltip: {
              show: true, // 显示提示框
              formatter: function (params) {
                // 格式化提示框内容，显示数据信息
                return `${params.name}：${params.value}万亩`;
              },
            },

            // tooltip: {
            //   confine: true,
            //   textStyle: {
            //     fontSize: 10, // 字体大小
            //   },
            // },
            series: [
              {
                type: "pie",
                radius: ["0%", "60%"],
                center: ["34%", "55%"],
                data: data5,
              },
            ],
          };
          myChart5.setOption(option5);

          // 基于准备好的dom，初始化echarts实例
          var myChart6 = echarts.init(document.getElementById("main6"));
          var pieData6 = [
            {
              name: "常规鱼",
              value: 89409,
            },
            {
              name: "河蟹",
              value: 24587,
            },
            {
              name: "中华鳖",
              value: 2468,
            },
            {
              name: "乌龟",
              value: 97,
            },
            {
              name: "克氏原螯虾",
              value: 10160,
            },
            {
              name: "青虾",
              value: 1355,
            },
            {
              name: "鳜鱼",
              value: 2918,
            },
            {
              name: "黄颡鱼",
              value: 230,
            },
            {
              name: "乌鳢",
              value: 596,
            },
            {
              name: "黄鳝",
              value: 176,
            },
            {
              name: "泥鳅",
              value: 176,
            },
            {
              name: "其它",
              value: 2159,
            },
          ];

          document.getElementById("name6").innerHTML = pieData6[0].name;
          document.getElementById("total6").innerHTML =
            pieData6[0].value + "<i>吨</i>";

          var pieData6 = pieData6.map((item) => {
            item.name = item.name;
            item.value = item.value;
            return item;
          });

          var option6 = {
            // tooltip: {
            //   trigger: "item",
            // },

            legend: {
              orient: "vertical",
              icon: "circle",
              right: "0%",
              top: "1%",
              bottom: "15%",
              itemGap: 10,

              itemWidth: 7, //图标宽
              itemHeight: 7, //图标高

              textStyle: {
                color: "auto",
                fontSize: 12,

                padding: [0, 5], //文字与图形之间的左右间距
                rich: {
                  b: {
                    fontSize: 12,
                    // lineHeight: 25,
                  },
                  a: {
                    // color: "#ffffff",
                    fontSize: 12,
                    lineHeight: 18,
                  },
                },
              },

              //       textStyle: {
              //     rich: {
              //        orgname: {
              //         color: '#ffffff',
              //          fontSize: 12,
              //          padding: [0, 0, 10, 0],
              //        },
              //      value: {
              //           fontSize: 12,
              //           color: '#ffffff',

              //          },
              //     },
              // },

              formatter: function (name) {
                let data = pieData6;
                let total = 0;
                let tarValue;
                for (let i = 0; i < data.length; i++) {
                  total += data[i].value;
                  if (data[i].name == name) {
                    tarValue = data[i].value + "吨";
                  }
                }
                let v = tarValue;

                var arr = [`{a|${name}}`, `{b|${tarValue}}`];
                return arr.join("\n");

                //   const arr = [
                //      `{orgname|${name}}`,
                //      `{count|${v}}`,
                //   ];
                //  return arr.join("\n");
              },
            },

            series: [
              {
                type: "gauge",
                startAngle: 270,
                endAngle: -89.9999,
                radius: "53%",
                center: ["25.5%", "48%"],

                axisTick: {
                  show: false,
                },
                axisLabel: {
                  show: false,
                },
                splitNumber: 50,
                axisLine: {
                  show: false,
                  lineStyle: {
                    color: [[1, "rgba(2, 115, 131, 1)"]],
                    width: 0,
                  },
                },
                splitLine: {
                  length: 5,
                  lineStyle: {
                    length: 20,
                    width: 3,
                    color: "rgba(2, 115, 131, 1)",
                    distance: 10,
                  }, //刻度节点线
                },
                detail: {
                  show: false,
                },
              },
              {
                name: "养殖产量(吨)",
                type: "pie",

                radius: ["60%", "78%"],
                center: ["25.5%", "48%"],
                // avoidLabelOverlap: false,
                label: {
                  show: false,
                  fontSize: 32,
                  color: "#fff",
                  position: "center",
                  formatter: "1520" + "\n\r" + "{project|总数}",
                  rich: {
                    project: {
                      fontSize: 15,
                      color: "#F0F2F5",
                    },
                  },
                },
                labelLine: {
                  show: false,
                },

                itemStyle: {
                  normal: {
                    //   borderRadius:5,
                    // borderColor: 'rgba(46,60,70,1)',
                    // borderWidth:5,
                    color: function (colors) {
                      let colorList = [
                        "#76EBFF",
                        "#f9c956",
                        "#75bedc",
                        "#FF4F4A",
                        "#00FFB4",
                        "#DBCE00",
                        "#DC8D31",
                        "#91cd77",
                        "#ef6567",
                        "#f9c956",
                        "#75bedc",
                      ];

                      return colorList[colors.dataIndex];
                    },
                  },
                },

                data: pieData6,
              },
            ],
          };
          myChart6.setOption(option6);

          // 基于准备好的dom，初始化echarts实例
          var myChart9 = echarts.init(document.getElementById("main9"));

          var pieData9 = [
            {
              createBy: "",
              createTime: "2023-07-14 11:13:50",
              updateBy: "",
              updateTime: "2023-07-14 11:13:50",
              remark: null,
              id: 1,
              label: "省基地稻麦",
              percent: 80.79,
              status: "0",
              delFlag: "0",
            },
            {
              createBy: "",
              createTime: "2023-07-14 11:13:50",
              updateBy: "",
              updateTime: "2023-07-14 11:13:50",
              remark: null,
              id: 2,
              label: "部基地稻麦",
              percent: 60,
              status: "0",
              delFlag: "0",
            },
          ];
          var colors1 = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: "#167F88", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#0CEBFD", // 100% 处的颜色
            },
          ]);
          var colors2 = new echarts.graphic.LinearGradient(0, 1, 1, 0, [
            {
              offset: 0,
              color: "#FF4F4A", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#FF4F4A", // 100% 处的颜色
            },
          ]);
          var colors3 = new echarts.graphic.LinearGradient(0, 1, 1, 0, [
            {
              offset: 0,
              color: "rgba(93, 145, 250, 1)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(122, 92, 250, 1)", // 100% 处的颜色
            },
          ]);
          var colors4 = new echarts.graphic.LinearGradient(0, 1, 1, 0, [
            {
              offset: 0,
              color: "rgba(75, 122, 250, 1)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(49, 197, 222, 1)", // 100% 处的颜色
            },
          ]);

          var colors9 = [colors1, colors2, colors3, colors4];
          let Data9 = [];
          for (let i = 0; i < pieData9.length; i++) {
            Data9.push({
              value: pieData9[i].percent,
              name: pieData9[i].label,
            });
          }

          var option9 = {
            color: colors9,

            tooltip: {
              show: true, // 显示提示框
              formatter: function (params) {
                // 格式化提示框内容，显示数据信息
                return `${params.name}：${params.value}亩`;
              },
            },
            series: [
              {
                type: "gauge",
                startAngle: 270,
                endAngle: -89.9999,
                radius: "80%",
                center: ["50%", "45%"],

                axisTick: {
                  show: false,
                },
                axisLabel: {
                  show: false,
                },
                splitNumber: 50,
                axisLine: {
                  show: false,
                  lineStyle: {
                    color: [[1, "rgba(2, 115, 131, 1)"]],
                    width: 1,
                  },
                },
                splitLine: {
                  length: 1,
                  lineStyle: {
                    length: 1,
                    width: 5,
                    color: "rgba(2, 115, 131, 1)",
                    distance: 1,
                  }, //刻度节点线
                },
                detail: {
                  show: false,
                },
              },
              {
                type: "pie",
                radius: [0, 72],
                center: ["50%", "45%"],
                data: Data9,
                labelLine: {
                  normal: {
                    length: 35, // 改变标示线的长度
                    lineStyle: {
                      color: "#FFFFFF", // 改变标示线的颜色
                    },
                  },
                },
                label: {
                  normal: {
                    formatter: function (data) {
                      return `${data.value} 万亩` + "\n" + `${data.name}`;
                    },
                    textStyle: {
                      color: "#17ABB8", // 改变标示文字的颜色
                    },
                  },
                },
              },
            ],
          };

          myChart9.setOption(option9);

          this.drawChart7();
          this.drawChart8();
          this.drawChart10();

          this.drawChart11();
          this.drawChart12();
        },

        methods: {
          drawChart7() {
            this.name = this.nyjxhzy[0].label;
            this.total = this.nyjxhzy[0].percent;
            this.myChart = echarts.init(document.getElementById("main7"));

            const pieData = this.nyjxhzy.map((item) => {
              item.name = item.label;
              item.value = item.percent;
              return item;
            });
            const option = {
              tooltip: {
                trigger: "item",
              },

              series: [
                {
                  name: "农业机械化作业",
                  type: "pie",

                  radius: ["60%", "70%"],
                  center: ["25%", "47%"],
                  // avoidLabelOverlap: false,
                  label: {
                    show: false,
                    fontSize: 32,
                    color: "#fff",
                    position: "center",
                    formatter: "1520" + "\n\r" + "{project|总数}",
                    rich: {
                      project: {
                        fontSize: 15,
                        color: "#F0F2F5",
                      },
                    },
                  },
                  labelLine: {
                    show: false,
                  },

                  itemStyle: {
                    normal: {
                      color: function (colors) {
                        let colorList = [
                          "#21a9bf",
                          "#c0fc89",
                          "#75bedc",
                          "#FF4F4A",
                          "#00FFB4",
                          "#DBCE00",
                          "#DC8D31",
                          "#91cd77",
                          "#ef6567",
                          "#f9c956",
                          "#75bedc",
                        ];

                        return colorList[colors.dataIndex];
                      },
                    },
                  },

                  data: pieData,
                },
              ],
            };

            this.myChart.setOption(option);
            window.addEventListener("resize", () => {
              this.myChart.resize();
            });

            // 鼠标hover事件
            this.myChart.on(
              "mouseover",
              { seriesName: "农业机械化作业" },
              (params) => {
                console.log("mouseover", params);
                this.name = params.name;
                this.total = params.value;
              }
            );
          },

          drawChart8() {
            this.name8 = this.nyjxslzb[0].label;
            this.total8 = this.nyjxslzb[0].scale;
            this.myChart8 = echarts.init(document.getElementById("main8"));

            const pieData = this.nyjxslzb.map((item) => {
              item.name = item.label;
              item.value = item.scale;
              item.percent = item.percent;
              return item;
            });
            const option = {
              // tooltip: {
              //   trigger: "item",
              // },

              tooltip: {
                show: true, // 显示提示框
                formatter: function (params) {
                  console.log("params", params);
                  // 格式化提示框内容，显示数据信息
                  return `${params.name}：${params.data.percent}台`;
                },
              },

              // legend: {
              //   orient: "vertical",
              //   icon: "circle",
              //   right: "5%",
              //   top: "5%",
              //   bottom: "15%",
              //   itemGap: 15,

              //   textStyle: {
              //     color: () => {}, // 把颜色这里做成函数就可以了
              //     fontSize: 14,
              //   },

              //   formatter: function(name) {
              //     let data = pieData;
              //     let total = 0;
              //     let tarValue;
              //     for (let i = 0; i < data.length; i++) {
              //       total += data[i].value;
              //       if (data[i].name == name) {
              //         tarValue = data[i].value + "%";
              //       }
              //     }
              //     let v = tarValue;

              //     //计算出百分比
              //     return `${name}` + "\n" + `${v} `;
              //     //name是名称，v是数值
              //   },
              // },

              series: [
                {
                  type: "gauge",
                  startAngle: 270,
                  endAngle: -89.9999,
                  radius: "53%",
                  center: ["27%", "47%"],

                  axisTick: {
                    show: false,
                  },
                  axisLabel: {
                    show: false,
                  },
                  splitNumber: 50,
                  axisLine: {
                    show: false,
                    lineStyle: {
                      color: [[1, "rgba(2, 115, 131, 1)"]],
                      width: 0,
                    },
                  },
                  splitLine: {
                    length: 5,
                    lineStyle: {
                      length: 20,
                      width: 3,
                      color: "rgba(2, 115, 131, 1)",
                      distance: 10,
                    }, //刻度节点线
                  },
                  detail: {
                    show: false,
                  },
                },
                {
                  name: "农业机械数量占比",
                  type: "pie",

                  radius: ["60%", "75%"],
                  center: ["27%", "47%"],
                  // avoidLabelOverlap: false,
                  label: {
                    show: false,
                    fontSize: 32,
                    color: "#fff",
                    position: "center",
                    formatter: "1520" + "\n\r" + "{project|总数}",
                    rich: {
                      project: {
                        fontSize: 15,
                        color: "#F0F2F5",
                      },
                    },
                  },
                  labelLine: {
                    show: false,
                  },

                  itemStyle: {
                    normal: {
                      borderRadius: 5,
                      borderColor: "rgba(15,39,53,1)",
                      borderWidth: 5,
                      color: function (colors) {
                        let colorList = [
                          "#76EBFF",
                          "#f9c956",
                          "#75bedc",
                          "#FF4F4A",
                          "#00FFB4",
                          "#DBCE00",
                          "#DC8D31",
                          "#91cd77",
                          "#ef6567",
                          "#f9c956",
                          "#75bedc",
                        ];

                        return colorList[colors.dataIndex];
                      },
                    },
                  },

                  data: pieData,
                },
              ],
            };

            this.myChart8.setOption(option);
            window.addEventListener("resize", () => {
              this.myChart8.resize();
            });

            // this.myChart.dispatchAction({
            //   type: 'highlight',
            //   seriesIndex: 0, // 图表中的第一个系列
            //   dataIndex: 0, // 要高亮的数据项的索引
            // });

            // 鼠标hover事件
            this.myChart8.on(
              "mouseover",
              { seriesName: "农业机械数量占比" },
              (params) => {
                // console.log("mouseover", params);
                this.name8 = params.name;
                this.total8 = params.value;
              }
            );
          },

          drawChart10() {
            this.name10 = this.ynxxsfb[0].label;
            this.total10 = this.ynxxsfb[0].percent;
            this.myChart10 = echarts.init(document.getElementById("main10"));
            let all = 0;
            const pieData = this.ynxxsfb.map((item) => {
              item.name = item.label;
              item.value = item.percent;
              all += item.percent;
              return item;
            });
            const option = {
              tooltip: {
                trigger: "item",
              },

              legend: {
                orient: "vertical",
                icon: "circle",
                left: "10%",
                top: "42%",
                bottom: "0%",
                itemGap: 20,
                itemWidth: 10, //图标宽
                itemHeight: 10, //图标高

                textStyle: {
                  color: "auto",
                  fontSize: 14,

                  padding: [0, 30, 0, 15], //文字与图形之间的左右间距
                  rich: {
                    b: {
                      fontSize: 16,
                      color: "#00F3FC",
                      // lineHeight: 25,
                    },
                    a: {
                      color: "#D7E1E1",
                      fontSize: 14,
                      lineHeight: 20,
                    },
                  },
                },

                formatter: function (name) {
                  let data = pieData;
                  let total = 0;
                  let tarValue;
                  let av;
                  for (let i = 0; i < data.length; i++) {
                    total += data[i].value;
                    if (data[i].name == name) {
                      tarValue = data[i].value;
                      av = ((data[i].value / all) * 100).toFixed(0) + "%";
                    }
                  }
                  let v = tarValue;

                  var arr = [`{a|${name} ${v}}`, `{b|${av}}`];
                  return arr.join("\n");

                  // return `${name} ${v}` + "\n" + `${av}`;
                },

                rich: {
                  b: {
                    fontSize: 10,
                    color: `#ffffff`,
                  },
                },
              },

              series: [
                {
                  name: "益农信息社分布",
                  type: "pie",

                  radius: ["20%", "40%"],
                  center: ["50%", "21%"],
                  // avoidLabelOverlap: false,
                  label: {
                    show: false,
                    fontSize: 32,
                    color: "#fff",
                    position: "center",
                    formatter: "1520" + "\n\r" + "{project|总数}",
                    rich: {
                      project: {
                        fontSize: 15,
                        color: "#F0F2F5",
                      },
                    },
                  },
                  labelLine: {
                    show: false,
                  },

                  itemStyle: {
                    normal: {
                      color: function (colors) {
                        let colorList = [
                          "#e45550",
                          "#3588c1",
                          "#61a0a8",
                          "#d48265",
                          "#91c7ae",
                          "#ca8622",
                          "#bda29a",
                          "#7a859c",
                          "#8b9eab",
                          "#c4ccd3",
                          "#fee394",
                          "#7df6f6",
                          "#61a0a8",
                          "#75bedc",
                          "#FF4F4A",
                          "#00FFB4",
                          "#DBCE00",

                          // "#76EBFF",
                          // "#f9c956",
                          // "#75bedc",
                          // "#FF4F4A",
                          // "#00FFB4",
                          // "#DBCE00",
                          // "#DC8D31",
                          // "#91cd77",
                          // "#ef6567",
                          // "#f9c956",
                          // "#75bedc",
                          // "#76EBFF",
                          // "#f9c956",
                          // "#75bedc",
                          // "#FF4F4A",
                          // "#00FFB4",
                          // "#DBCE00",
                        ];

                        return colorList[colors.dataIndex];
                      },
                    },
                  },

                  data: pieData,
                },
              ],
            };

            this.myChart10.setOption(option);
            window.addEventListener("resize", () => {
              this.myChart10.resize();
            });
          },
          drawChart11() {
            this.myChart11 = echarts.init(document.getElementById("main11"));
            const pieData11 = this.nyxmlx.map((item) => {
              item.name = item.label;
              return item;
            });
            const option = {
              tooltip: {
                trigger: "item",
              },

              legend: {
                orient: "vertical",
                right: "10%",
                top: "15%",
                bottom: "15%",
                itemGap: 35,
                textStyle: {
                  color: "#fff",
                },
              },
              series: [
                {
                  type: "gauge",
                  startAngle: 270,
                  endAngle: -89.9999,
                  radius: "63%",
                  center: ["30%", "50%"],
                  axisTick: {
                    show: false,
                  },
                  axisLabel: {
                    show: false,
                  },
                  splitNumber: 50,
                  axisLine: {
                    show: false,
                    lineStyle: {
                      color: [[1, "rgba(2, 115, 131, 1)"]],
                      width: 20,
                    },
                  },
                  splitLine: {
                    length: 5,
                    lineStyle: {
                      length: 20,
                      width: 3,
                      color: "rgba(2, 115, 131, 1)",
                      distance: 10,
                    }, //刻度节点线
                  },
                  detail: {
                    show: false,
                  },
                },
                {
                  name: "农业项目类型",
                  type: "pie",
                  radius: ["70%", "80%"],
                  center: ["30%", "50%"],
                  avoidLabelOverlap: false,
                  label: {
                    show: true,
                    fontSize: 32,
                    color: "#fff",
                    position: "center",
                    formatter: "1520" + "\n\r" + "{project|项目总数}",
                    rich: {
                      project: {
                        fontSize: 15,
                        color: "#F0F2F5",
                      },
                    },
                  },
                  // emphasis: {
                  //   label: {
                  //     show: true,
                  //     fontSize: 20,
                  //   },
                  // },
                  labelLine: {
                    show: false,
                  },
                  itemStyle: {
                    normal: {
                      color: (list) => {
                        var colorList = [
                          {
                            colorStart: "rgba(53, 253, 62, 1)",
                            colorEnd: "rgba(6, 20, 51, 1)",
                          },
                          {
                            colorStart: "rgba(50, 241, 207, 1)",
                            colorEnd: "rgba(3, 12, 33, 1)",
                          },
                          {
                            colorStart: "rgba(61, 183, 206, 1)",
                            colorEnd: "rgba(6, 21, 53, 1)",
                          },
                          {
                            colorStart: "rgba(255, 143, 143, 1)",
                            colorEnd: "rgba(6, 21, 52, 1)",
                          },
                          {
                            colorStart: "rgba(246, 255, 0, 1)",
                            colorEnd: "rgba(6, 19, 50, 1)",
                          },
                          {
                            colorStart: "rgba(255, 206, 87, 1)",
                            colorEnd: "rgba(6, 20, 52, 1)",
                          },
                        ];
                        return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                          {
                            //左、下、右、上
                            offset: 0,
                            color: colorList[list.dataIndex]["colorStart"],
                          },
                          {
                            offset: 1,
                            color: colorList[list.dataIndex]["colorEnd"],
                          },
                        ]);
                      },
                    },
                  },
                  data: pieData11,
                },
              ],
            };
            this.myChart11.setOption(option);
            window.addEventListener("resize", () => {
              this.myChart11.resize();
            });
          },
          drawChart12() {
      const dataSource = this.dataSource.map(item => {
        item.name = item.deviceName;
        item.value = item.deviceProportion;
        return item;
      });
      this.myChart12 = echarts.init(document.getElementById("main12"));
      const option = {
        legend: {
          top: '5%',
          left: 'center',
          show: false,
        },
        grid: {
          left: "2%",
          right: "5%",
          bottom: "5%",
          top: "8%",
          containLabel: true,
        },
        color: ['#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
        series: [
          {
            name: '设备种类',
            type: 'pie',
            roseType: 'area',
            label: {
              position: 'outer',
              formatter: '{b}\n{c}%',
              alignTo: 'edge',
              margin: "15%",
              edgeDistance: '80',
            },
            itemStyle: {
              normal: {
                //具体决定了饼状图每一份的颜色显示
                //饼状图阴影，值越大阴影亮度越高
                shadowBlur: 30,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
            },
            data: dataSource
          },
        ]
      };
      this.myChart12.setOption(option);
      window.addEventListener("resize", () => {
        this.myChart12.resize();
      });
    },},
      });
    </script>
  </body>
</html>
